﻿<!DOCTYPE html>
<html>
<head>
    <title>个人通讯录</title>
    <style>
        /* 样式 */
        body {
            font-family: Arial, sans-serif;
        }
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
        }
        th {
            background-color: #f2f2f2;
        }
        form {
            margin-bottom: 20px;
        }
        input[type="text"], input[type="tel"], textarea {
            width: 200px;
            padding: 5px;
            box-sizing: border-box;
        }
        input[type="submit"] {
            padding: 5px 10px;
        }

        /* 居中和对齐样式 */
        h1 {
            text-align: center;
        }
        form label {
            display: inline-block;
            width: 60px;
            text-align: right;
            margin-right: 10px;
        }
    </style>
</head>
<body>
<h1>个人通讯录</h1>

<!-- 联系人列表 -->
<table>
    <tr>
        <th>姓名</th>
        <th>地址</th>
        <th>电话</th>
        <th>操作</th>
    </tr>
    <!-- 其他联系人行 -->
</table>

<!-- 添加联系人表单 -->
<form id="contactForm" onsubmit="addContact(event)">
    <h2>添加联系人</h2>
    <label for="name">姓名：</label>
    <input type="text" id="name" required><br>
    <label for="address">地址：</label>
    <input type="text" id="address" required><br>
    <label for="tel">电话：</label>
    <input type="tel" id="tel" required><br>
    <input type="submit" value="添加联系人">
</form>

<script>
    // 添加联系人
    function addContact(event) {
        event.preventDefault(); // 阻止表单默认提交行为

        // 从表单中获取联系人信息
        var name = document.getElementById("name").value;
        var address = document.getElementById("address").value;
        var tel = document.getElementById("tel").value;

        // 创建联系人行的HTML
        var newRow = "<tr><td>" + name + "</td><td>" + address + "</td><td>" + tel + "</td><td>" +
            "<button onclick='editContact(this)'>编辑</button>" +
            "<button onclick='deleteContact(this)'>删除</button>" +
            "</td></tr>";

        // 将新行添加到联系人列表
        var contactTable = document.querySelector("table");
        contactTable.innerHTML += newRow;

        // 清空表单
        document.getElementById("name").value = "";
        document.getElementById("address").value = "";
        document.getElementById("tel").value = "";
    }

    // 编辑联系人
    function editContact(button) {
        var row = button.parentNode.parentNode;
        var name = row.cells[0].innerText;
        var address = row.cells[1].innerText;
        var tel = row.cells[2].innerText;

        // 将联系人信息填充到表单
        document.getElementById("name").value = name;
        document.getElementById("address").value = address;
        document.getElementById("tel").value = tel;

        // 在提交按钮旁显示保存按钮
        var submitBtn = document.querySelector("input[type='submit']");
        submitBtn.value = "保存";
        submitBtn.onclick = function() {
            saveContact(row);
        };
    }

    // 保存联系人
    function saveContact(row) {
        var name = document.getElementById("name").value;
        var address = document.getElementById("address").value;
        var tel = document.getElementById("tel").value;

        // 更新联系人行的数据
        row.cells[0].innerText = name;
        row.cells[1].innerText = address;
        row.cells[2].innerText = tel;

        // 清空表单
        document.getElementById("name").value = "";
        document.getElementById("address").value = "";
        document.getElementById("tel").value = "";

        // 恢复提交按钮
        var submitBtn = document.querySelector("input[type='submit']");
        submitBtn.value = "添加联系人";
        submitBtn.onclick =addContact;
    }

    // 删除联系人
    function deleteContact(button) {
        var row = button.parentNode.parentNode;
        row.parentNode.removeChild(row);
    }
</script>
</body>
</html>
